<template>
  <div class="employee-add">
    <a-card title="添加员工" class="add-card">
      <a-form
          :model="formState"
          :rules="formRules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 14 }"
          @finish="handleSubmit"
      >
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入员工姓名" />
        </a-form-item>

        <a-form-item label="工号" name="employeeId">
          <a-input v-model:value="formState.employeeId" placeholder="请输入工号" />
        </a-form-item>

        <a-form-item label="性别" name="gender">
          <a-radio-group v-model:value="formState.gender">
            <a-radio :value="1">男</a-radio>
            <a-radio :value="2">女</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="部门" name="department">
          <a-input v-model:value="formState.department" placeholder="请输入部门" />
        </a-form-item>

        <a-form-item label="职位" name="position">
          <a-input v-model:value="formState.position" placeholder="请输入职位" />
        </a-form-item>

        <a-form-item label="手机号" name="phone">
          <a-input v-model:value="formState.phone" placeholder="请输入手机号" />
        </a-form-item>

        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-space>
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button @click="resetForm">重置</a-button>
            <a-button @click="goBack">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue' // 添加这行导入
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { addEmployee } from '@/api/employee'

const router = useRouter()
// 创建loading响应式变量
const loading = ref(false)

// 表单数据
const formState = reactive({
  name: '',
  employeeId: '',
  gender: 1,
  department: '',
  position: '',
  phone: '',
  email: ''
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度在2-10个字符', trigger: 'blur' }
  ],
  employeeId: [
    { required: true, message: '请输入工号', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请输入部门', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  try {
    loading.value = true
    const response = await addEmployee(formState)
    if (response.data.code === 200) {
      message.success(response.data.message)
      // 添加成功后延迟1秒返回列表页，确保数据已更新
      setTimeout(() => {
        router.push('/employee/list')
      }, 1000)
    } else {
      message.error(response.data.message || '添加失败')
    }
  } catch (error) {
    message.error('添加失败，请重试')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.keys(formState).forEach(key => {
    formState[key] = key === 'gender' ? 1 : ''
  })
}

// 返回列表
const goBack = () => {
  router.push('/employee/list')
}
</script>

<style scoped>
.employee-add {
  padding: 20px;
}

.add-card {
  border-radius: 8px;
}
</style>